<template>
  <div>
    <Card dis-hover class="bgd-content">
      <div slot="title">
          <div class="filtr-inline">
              <Button type="info" @click="onClickAdd">添加</Button>
          </div>
          <div class="filtr-inline">
            <span>职位：</span>
            <Select v-model="form.role" clearable style="width:140px">
                <Option v-for="item in items" :value="item.id" :key="item.id">{{ item.name }}</Option>
            </Select>
          </div>
          <div class="filtr-inline">
            <span>姓名：</span><i-input v-model="form.name" placeholder="请输入..." style="width: 140px"></i-input>
          </div>
          <div class="filtr-inline">
              <Button type="primary" @click="getList">搜索</Button>
          </div>
      </div>
      <div>
        <Table :loading="loading" :columns="columns" :data="data"></Table>
      </div>
    </Card>
    <div class="page-block">
      <Page :total="total" :current="form.page" @on-change="onChangePage"></Page>
    </div>
    <Modal
        v-model="show"
        footer-hide
        class-name="vertical-center-modal">
        <Tabs v-model="currentKey">
            <TabPane label="基本信息" name="base">
              <Form ref="formBase" :model="formBase" :label-width="80">
                  <FormItem label="账号" prop="username">
                      <Input :disabled="disabled" v-model="formBase.username" style="width: 260px"></Input>
                  </FormItem>
                  <FormItem label="密码" prop="password">
                      <Input :disabled="disabled" v-model="formBase.password" style="width: 260px"></Input>
                  </FormItem>
                  <FormItem label="职位" prop="name">
                    <Select v-model="formBase.role" style="width:260px">
                        <Option v-for="item in items" :value="item.id" :key="item.id">{{ item.name }}</Option>
                    </Select>
                  </FormItem>
                  <FormItem>
                      <Button type="primary" :loading="buttonLoad" @click="handleSubmit('formBase')">保存</Button>
                  </FormItem>
              </Form>
            </TabPane>
            <TabPane label="联系信息" name="contact">
                <Contact :id="id" @sendId="onSend"></Contact>
            </TabPane>
        </Tabs>
    </Modal>
  </div>
</template>
<script>
import Contact from '_c/hwl/contact'
import { _getUsers, _getPosition, _upStaffById, _status } from '@/api/system.js'
export default {
  name: 'user',
  components: {
    Contact
  },
  data () {
    return {
      type: 0, // 1 == 新增 
      contact: 0, // 个人信息id存放
      disabled: false,
      buttonLoad: false,
      show: false,
      loading: true,
      total: 0,
      id: 0,
      currentKey: 'base',
      form: {
        name: '',
        role: '',
        page: 1
      },
      // 提交保存数据
      formBase: {
        id: '',
        username: '',
        password: '',
        role: ''
      },
      columns: [
        {
            title: '账号',
            key: 'username'
        },
        {
            title: '职位',
            key: 'name',
            sortable: true
        },
        {
            title: '电话',
            key: 'mobile',
            width: 160
        },
        {
            title: '状态',
            key: 'status',
            sortable: true,
            render: (h, params) => {
              if (params.row.status == 0) {

                return  h('Button', {
                        props: {type: 'success', size: 'small'},
                  }, [
                      h('Poptip', {
                          props: {
                              confirm: true,
                              transfer: true,
                              placement: 'left-end',
                              title: '确定停用吗？',
                              type: 'success',
                              size: 'small',
                          },
                          on: {
                              'on-ok': () => {
                                  this.changeStatus(params.row.id, 1)
                              },
                          }
                      }, '正常')
                  ])
              }else {
                return  h('Button', {
                  props: {type: 'error', size: 'small'},
                }, [
                    h('Poptip', {
                        props: {
                            confirm: true,
                            transfer: true,
                            placement: 'left-end',
                            title: '是否启用？',
                            type: 'primary',
                            size: 'small',
                        },
                        on: {
                            'on-ok': () => {
                                this.changeStatus(params.row.id, 0)
                            },
                        }
                    }, '停用')
                ])
              }
            },
        },
        {
            title: '操作',
            key: 'action',
            render: (h, params) => {
              return h('Button', {
                props: {
                    type: 'primary',
                    size: 'small'
                },
                style: {
                    marginRight: '5px'
                },
                on: {
                    click: () => {
                        this.currentKey = 'base'
                        this.type = 0 // 更新
                        this.show = true
                        console.log(params.row)
                        // 联系信息id
                        this.id = params.row.contact
                        
                        // 基本信息
                        this.disabled = true
                        this.formBase.username = params.row.username
                        this.formBase.password = '******'
                        this.formBase.id = params.row.id
                        this.formBase.role = params.row.role
                    }
                }
              }, '查看')
                
            }
        },
      ],
      data: [],
      items: [] // 存放员工类型
    }
  },
  watch: {
    show: function (newQuestion, oldQuestion) {
      if (newQuestion) {
        this.contact = 0
        this.currentKey = 'base'
      }else {
        this.disabled = false
      }
    }
  },
  methods: {
    changeStatus(id, status) {
      _status({id, status}).then( res => {
        const obj = res.data
        if (obj.status == 1) {
          this.$Message.success(obj.msg)
          this.getList()
        }else {
          this.$Message.error(obj.msg)
        }
      })
    },
    onSend (id) {
      this.contact = id
    },
    onChangeShow (e) {
        this.show = e
    },
    onChangePage (page) {
      this.form.page = page
      this.getList()
    },
    // 增加按钮
    onClickAdd () {
      this.type = 1
      this.show = true
      this.id = 0 // 查找个人信息
      this.formBase = {
        id: '',
        username: '',
        password: '',
        role: ''
      }
    },
    // 保存数据
    handleSubmit (form) {
      const obj = {}
      Object.assign(obj, this.formBase, {contact: this.contact})
      // 新增
      if (this.type && obj.contact == 0) {
        this.$Message.error('请先填写基本信息')
        return ;
      }else if (obj.role == '' || obj.username == '' || obj.password == ''){
        this.$Message.error('请先填写职位 : 账号 : 密码')
        return ;
      }
      this.buttonLoad = true
      _upStaffById(obj).then( res => {
        const obj = res.data
        if (obj.status == 1){
          this.$Message.success(obj.msg)
        }else {
          this.$Message.error(obj.msg)
        }
        this.buttonLoad = false
        this.show = false
        this.getList()
      })
    },
    // 获取员工职位类型select
    getPosition () {
      _getPosition().then( res => {
        const obj = res.data.data
        this.items = obj.data
      })
    },
    // 获取数据
    getList () {
      this.loading = true
      _getUsers(this.form).then( res => {
        const obj = res.data.data
        this.total = obj.total
        this.data = obj.data
        this.loading = false
      })
    }
  },
  created() {
    this.default
  },
  mounted() {
    this.getPosition() // 获取员工职位类型
    this.getList()
  },
}
</script>
